<template>
	<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config" v-if="getMember()">
		<view :style="themeColor()">

			<category-template-one-one class="category" :categoryId="categoryId" :config="config" />

		</view>
	</x-skeleton>
	<!-- 水印 -->
	<watermark></watermark>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue';
import categoryTemplateOneOne from '@/addon/pickUp/pages/goods/components/category-template-one-one.vue';
import useCartStore from '@/addon/shop/stores/cart'
import { getMember } from '@/utils/common';

const cartStore = useCartStore();
const config: any = ref({
	level: 1,
	template: "style-1",
	page_title: "提货商品",
	search: {
		control: 1,
		title: "请搜索您想要提货的商品"
	},
	goods: {
		style: "single-cols"
	},
	sort: "default",
	cart: {
		control: 1,
		event: "cart",
		style: "style-1",
		text: "提货"
	}
})
const categoryId = ref(0)

const getGoodsCategoryConfigFn = () => {
	config.value = {
		level: 1,
		template: "style-1",
		page_title: "提货商品",
		search: {
			control: 1,
			title: "请搜索您想要提货的商品"
		},
		goods: {
			style: "single-cols"
		},
		sort: "default",
		cart: {
			control: 1,
			event: "cart",
			style: "style-1",
			text: "提货"
		}
	}
	skeleton.loading = false
	uni.setNavigationBarTitle({
		title: config.value.page_title
	});


}
const skeleton = reactive({
	type: 'list',
	loading: true,
	config: {
		gridRows: 5,


	}
})
onLoad((options: any) => {
	categoryId.value = options.category_id || 0;
	getGoodsCategoryConfigFn()
});

onShow(() => {
	// 查询购物车列表
	cartStore.getList();
})

</script>
<style>
/*  #ifdef  H5  */
:deep(.category .detail .mescroll-body) {
	padding-bottom: calc(50px + constant(safe-area-inset-bottom)) !important;
	padding-bottom: calc(50px + env(safe-area-inset-bottom)) !important;
}

:deep(.category .cart .mescroll-body) {
	padding-bottom: calc(100rpx + 50px + constant(safe-area-inset-bottom)) !important;
	padding-bottom: calc(100rpx + 50px + env(safe-area-inset-bottom)) !important;
}

/*  #endif  */
/*  #ifndef  H5  */
.category .detail .mescroll-body {
	padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)) !important;
	padding-bottom: calc(100rpx + env(safe-area-inset-bottom)) !important;
}

.category .cart .mescroll-body {
	padding-bottom: calc(200rpx + constant(safe-area-inset-bottom)) !important;
	padding-bottom: calc(200rpx + env(safe-area-inset-bottom)) !important;
}

/*
.category .labelPopup :deep(.u-fade-enter-active) {
	top: 92rpx !important;
	left: 166rpx !important;
	z-index: 8 !important;
	
	
}
.category .labelPopup :deep(.u-slide-down-enter-active){
	top: 92rpx !important;
	left: 165rpx !important;
	z-index: 8 !important;
}
.category .labelPopup.active :deep(.u-fade-enter-active) {
	top: 190rpx !important;
	
}
.category .labelPopup.active :deep(.u-slide-down-enter-active){
	top: 190rpx !important;
}
.category .labelPopup :deep(.u-fade-enter-to){
	top: 92rpx !important;
	left: 166rpx !important;
	z-index: 8 !important;
}
.category .labelPopup :deep(.u-slide-down-leave-to){
	top: 92rpx !important;
	left: 165rpx !important;
	z-index: 8 !important;
} */
.category .labelPopup :deep(.u-transition) {
	top: 96rpx !important;
	left: 170rpx !important;
	z-index: 8 !important;

	&:nth-child(2) {
		left: 168rpx !important;
	}
}

.category .labelPopup.active :deep(.u-transition) {
	top: 190rpx !important;
}

/*  #endif  */
</style>
<style lang="scss" scoped>
:deep(.mescroll-upwarp) {
	box-sizing: border-box;
	padding-left: 182rpx;
}

:deep(.tab-bar-placeholder) {
	display: none !important;
}

:deep(.u-tabbar__placeholder) {
	display: none !important;
}

button::after {
	border: 0 !important;
}

:deep(.part .mescroll-empty) {
	width: 542rpx;
	height: 542rpx;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 50rpx;
}
</style>
